// 核心公式

// 小图/大图=小区域/大区域
//小区域=(小图/大图)*大区域

//核心比例
// 大区域/小区域
// 



$(window).on("load", function () {
    $("#smallArea").css({
        width: $(".c1-left-big").width() / $("#bigImg").width() * $("#bigArea").width(),
        height: $(".c1-left-big").height() / $("#bigImg").height() * $("#bigArea").height(),

    })


    let oScale = $("#bigArea").width() / $("#smallArea").width();

    //鼠标进入小图, 小区域和大区域要显示
    $(".c1-left-big").on("mouseenter", function () {
        $("#smallArea").css("zIndex",20);
        $("#smallArea").show();
        $("#bigArea").show();
    }).on("mouseleave", function () {
        $("#smallArea").hide();
        $("#bigArea").hide();
    }).on("mousemove", function (e) {
        let mX = e.pageX - $(this).offset().left - $("#smallArea").width() / 2;
        let mY = e.pageY - $(this).offset().top - $("#smallArea").height() / 2;

        if (mX <= 0) {
            mX = 0
        }
        if (mX >= $(".c1-left-big").width() - $("#smallArea").width()) {
            mX = $(".c1-left-big").width() - $("#smallArea").width()
        }


        if (mY <= 0) {
            mY = 0
        }

        if (mY >= $(".c1-left-big").height() - $("#smallArea").height()) {
            mY = $(".c1-left-big").height() - $("#smallArea").height()
        }

        $("#smallArea").css({
            left: mX,
            top: mY
        })


        $("#bigImg").css({
            left: mX * -oScale,
            top: mY * -oScale,
        })
    })
})